<template>
  <app-chat :options="options"></app-chat>
</template>
<script setup>
const props = defineProps({
  data: Array,
})

const options = computed(() => {
  const labels = []
  const values = []

  props.data.forEach(item => {
    labels.push(item.label)
    values.push(item.value)
  })

  return {
    type: 'bar',
    data: {
      labels,
      datasets: [
        {
          label: '数量',
          data: values,
          backgroundColor: ['rgba(67, 97, 238, 0.7)', 'rgba(72, 149, 239, 0.7)'],
          borderColor: ['rgba(67, 97, 238, 1)', 'rgba(72, 149, 239, 1)'],
          borderWidth: 1,
        },
      ],
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        y: {
          beginAtZero: true,
          ticks: {
            stepSize: 1,
          },
        },
      },
      plugins: {
        legend: {
          display: false,
        },
      },
    },
  }
})
</script>
<style lang="scss" scoped>
.canvas {
  min-height: 300px;
}
</style>
